<template>
    <div class="tab-bar-item" :class="highlight" @click="handleClick">
        <!-- 动态绑定icon -->
        <i :class="`iconfont icon-${icon}`"></i>
        <slot></slot>
    </div>
</template>

<script setup>
import { inject,getCurrentInstance,computed } from "vue";
// 孙子组件传参
const props=defineProps({
    icon:{
        type:String,
        required:true,
    }
})
// 获取当前 Vue 组件的实例对象。
const instance=getCurrentInstance()
// 接收active值
const TabBar=inject('TabBar')

// 将当前组件实例（instance）添加到TabBar对象的children数组中
TabBar.children.push(instance)
// 查找当前组件实例的索引。遍历数组并返回第一个符合条件的元素的索引
const index=TabBar.children.findIndex((child)=>child===instance)
// console.log(TabBar)
// 计算属性添加类
const highlight=computed(()=>{
  return index===TabBar.props.modelValue?'active':''
})
const handleClick=()=>{
  TabBar.setActive(index)
}
</script>

<style scoped>
/* css导入 iconfont的网站生成 */
@import 'http://at.alicdn.com/t/c/font_4924087_6um3imwdqnu.css';
.tab-bar-item {
  height: 50px;
  text-align: center;
  color: #666;
  display: flex;
  /* 垂直居中 */
  justify-content: center;
  /* 垂直排列 */
  flex-direction: column;
  font-size: 12px;
  color: white;
}
.tab-bar-item i {
  font-size: 18px;
}
.active{
  color: rgb(255, 109, 109);
}
</style>